import React from 'react';
import {Image, PixelRatio, StyleSheet, Text, TouchableWithoutFeedback, View} from 'react-native';
import {windowHeight, windowWidth} from "../configs/platform.js";
import Swiper from 'react-native-swiper'
import {isIPhoneX} from "../configs/platform";
import BasePage from "./BasePage";
import {inject, observer} from "mobx-react";

/**
 *  引导页
 */
@inject('userStore')
@observer
class TutorialPage extends BasePage {


    state = {
        showDot:true,
        list: [
            require('../images/landingpage_1.jpg'),
            require('../images/landingpage_2.jpg'),
            require('../images/landingpage_3.jpg'),
        ]
    };


    /**
     * 跳转页面
     */
    jumpToPage = async () => {

        const {navigation} = this.props;
        Log('初始化jumpToPage')
        const loginInfo = await storage.load({
            key: 'session'
        }).catch((err) => {
            Log(err)
        });

        //登录信息为空
        if (IsNullOrEmpty(loginInfo)) {
            navigation.navigate('Auth');
        }
        else {
            const {setValue} = this.props.userStore;
            setValue('session', loginInfo)
            navigation.navigate('App');
        }

    }

    render() {
        const {list,showDot} = this.state;
        return (
            <View style={{flex: 1}}>
                <Swiper style={styles.wrapper}
                        dot={<View style={showDot?styles.dot:null}/>}
                        activeDot={<View style={showDot?styles.activeDot:null}/>}
                        paginationStyle={{
                            bottom: 10
                        }}
                        loop={false}
                        autoplay={false}
                        horizontal={true}
                        automaticallyAdjustContentInsets
                        onIndexChanged={(index)=>this.setState({showDot:!(index===list.length-1)})}
                        removeClippedSubviews={false}>
                    {
                        list.map((url, index) => {
                            if (index === list.length - 1) {
                                return (
                                    <View  key={'label'+index} style={styles.slide}>
                                        <TouchableWithoutFeedback onPress={() => this.jumpToPage()}>
                                            <Image
                                                style={[styles.image, {height: (isIPhoneX ? windowHeight - 34 : windowHeight - 20)}]}
                                                source={url}/>
                                        </TouchableWithoutFeedback>
                                    </View>
                                )
                            }
                            else {
                                return (

                                    <Image
                                        style={[styles.image, {height: (isIPhoneX ? windowHeight - 34 : windowHeight - 20)}]}
                                        source={url}
                                    />

                                )
                            }
                        })
                    }
                </Swiper>
            </View>
        );
    }
}

export default TutorialPage
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    wrapper: {},
    slide: {
        flex: 1,
        backgroundColor: 'white',
    },

    image: {
        width: windowWidth
    },
    goin: {
        width: 120,
        height: 40,
        borderRadius: 20,
        borderColor: '#795FDE',
        borderWidth: 2 / PixelRatio.get(),
        alignItems: 'center',
        justifyContent: 'center',
    },
    openText: {
        fontSize: 15,
        color: '#795FDE',

    },
    dot: {
        backgroundColor: 'rgba(73,144,248,0.5)',
        width: 5,
        height: 5,
        borderRadius: 2.5,
        marginLeft: 3,
        marginRight: 3
    },
    activeDot: {
        backgroundColor: 'rgba(73,144,248,1)',
        width: 12,
        height: 5,
        borderRadius: 3,
        marginLeft: 3,
        marginRight: 3
    },
    btn: {
        position: 'absolute',
        left: 0,
        top: 0,
        zIndex: 1000,
        alignItems: 'center',
        width: windowWidth,
        height: windowHeight,
        justifyContent: 'flex-end',
        paddingBottom: 120 + (isIPhoneX ? 54 : 0),
    },
});
